<template>
  <button 
    class="cyber-button p-6 text-white rounded-xl hover-glow transition-all duration-300 relative group"
    @click="$emit('click')"
  >
    <div class="relative z-10">
      <i :class="icon + ' mb-3 text-2xl'"></i>
      <p class="text-sm font-medium">{{ title }}</p>
    </div>
    <div 
      class="absolute inset-0 rounded-xl opacity-80 group-hover:opacity-100 transition-opacity bg-gradient-to-r"
      :class="gradient"
    ></div>
  </button>
</template>

<script setup lang="ts">
interface Props {
  title: string
  icon: string
  gradient: string
}

defineProps<Props>()
defineEmits<{
  click: []
}>()
</script>

